<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>list</title>
</head>
<body>
<table style="margin: 5em 0 0 5em">
    <thead id="thead">
    <tr>
        <td></td>
        <td style="height: 5em">文件</td>
        <td>文件URL</td>
    </tr>
    </thead>
    <tbody id="tbody"></tbody>
</table>
</body>

<script>
    fileList(getQueryVariable("dir"))

    function fileList(dir) {
        ajax("/filemanage/fileList?dir=" + dir, "GET", null, function (data) {
            if (data !== null) {
                let htmlStr = ""
                for (let i = 0; i < data.length; i++) {
                    let n = data[i]
                    htmlStr += '<tr>'
                    if (n.isDir) {
                        htmlStr += '<td></td>'
                        htmlStr += '<td>目录: </td>'
                        htmlStr += '<td><a href="/filemanage/list.html?dir=' + n.path + '">' + n.filename + '</a></td>'
                    } else if (n.isImage) {
                        htmlStr += '<td><button id="btn-' + n.path + '" onclick="deleteFile(\'' + n.path + '\')">删除</button></td>'
                        htmlStr += '<td><img style="width: 5em" src="' + n.accessUri + '"></td>'
                        htmlStr += '<td>' + n.accessUri + '</td>'
                    } else {
                        htmlStr += '<td><button id="btn-' + n.path + '" onclick="deleteFile(\'' + n.path + '\')">删除</button></td>'
                        htmlStr += '<td><img width="50em" src="https://s3.bmp.ovh/imgs/2022/03/2724b6e2bcb7a282.png"></td>'
                        htmlStr += '<td>' + n.accessUri + '</td>'
                    }
                    htmlStr += '</tr>'
                }
                document.getElementById("tbody").innerHTML = htmlStr
            }
        });
    }

    function deleteFile(path) {
        let form = new FormData();
        form.append("filePaths", path)
        ajax("/filemanage/deleteFileList", "POST", form, function (data) {
            document.getElementById("btn-" + path).parentElement.parentElement.remove()
        })
    }

    function ajax(uri, method, form, callback) {
        let xhr = new XMLHttpRequest();
        xhr.open(method, uri, true)
        xhr.send(form)
        xhr.onload = function () {
            if (xhr.status === 200) {
                let result = JSON.parse(xhr.responseText)
                if (result.code !== 200) {
                    alert(result.msg)
                    return false
                } else {
                    console.log(result)
                    callback(result.data)
                }
            } else {
                alert(xhr.status + ": " + xhr.responseText)
            }
        }
    }

    function getQueryVariable(variable) {
        let query = window.location.search.substring(1);
        let vars = query.split("&");
        for (let i = 0; i < vars.length; i++) {
            let pair = vars[i].split("=");
            if (pair[0] == variable) {
                return pair[1];
            }
        }
        return "";
    }
</script>
</html>